import { useEffect } from 'react';
import SimpleParticleBackground from '@/components/simple-particle-background';
import SearchBar from '@/components/search-bar';
import CategoryFilter from '@/components/category-filter';
import WebsiteCard from '@/components/website-card';
import { websites } from '@/data/config';
import { Sparkles } from 'lucide-react';
import { useAppContext, useAppActions } from '@/contexts/AppContext';
import { useWebsiteFilter } from '@/hooks/useWebsiteFilter';

function App() {
  const { state } = useAppContext();
  const { setFilteredWebsites, setSearchQuery, setActiveCategory } = useAppActions();
  
  const { searchQuery, activeCategory } = state;

  // 使用筛选 Hook
  const { filteredWebsites, hasResults } = useWebsiteFilter({
    websites,
    searchQuery,
    activeCategory,
  });

  // 更新 Context 中的筛选结果
  useEffect(() => {
    setFilteredWebsites(filteredWebsites);
  }, [filteredWebsites]);

  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-900 via-blue-900 to-slate-900 relative overflow-x-hidden">
      {/* 粒子背景 */}
      <SimpleParticleBackground />
      
      {/* 动态渐变背景 */}
      <div className="fixed inset-0 -z-20">
        <div className="absolute inset-0 bg-gradient-to-br from-blue-900/20 via-purple-900/20 to-slate-900/20" />
        <div className="absolute top-0 left-1/4 w-96 h-96 bg-blue-500/10 rounded-full blur-3xl animate-pulse" />
        <div className="absolute bottom-0 right-1/4 w-96 h-96 bg-purple-500/10 rounded-full blur-3xl animate-pulse delay-1000" />
      </div>

      {/* 玻璃拟态头部 */}
      <header className="sticky top-0 z-40 backdrop-blur-xl bg-slate-900/30 border-b border-white/10">
        <div className="container mx-auto px-6 py-6">
          <div className="text-center mb-8 animate-fade-in">
            <div className="flex items-center justify-center gap-3 mb-4">
              <Sparkles className="w-8 h-8 text-blue-400" />
              <h1 className="text-4xl md:text-5xl font-bold bg-gradient-to-r from-blue-400 via-purple-400 to-blue-400 bg-clip-text text-transparent">
                AI 导航
              </h1>
              <Sparkles className="w-8 h-8 text-purple-400" />
            </div>
            <p className="text-white/70 text-lg max-w-2xl mx-auto">
              精选优质AI工具，助力创作与工作效率提升
            </p>
          </div>

          {/* 搜索栏 */}
          <SearchBar />
        </div>
      </header>

      {/* 主内容区 */}
      <main className="container mx-auto px-6 py-8">
        {/* 分类筛选 */}
        <CategoryFilter />

        {/* 网站网格 - 简单网格布局 */}
        <div className="animate-fade-in-delay">
          {filteredWebsites.length > 0 ? (
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
              {filteredWebsites.map((website, index) => (
                <div key={website.id} style={{ animationDelay: `${index * 100}ms` }} className="animate-slide-up">
                  <WebsiteCard website={website} index={index} />
                </div>
              ))}
            </div>
          ) : (
            <div className="text-center py-16 opacity-0 animate-fade-in">
              <div className="bg-white/5 backdrop-blur-md border border-white/10 rounded-2xl p-8 max-w-md mx-auto">
                <div className="text-6xl mb-4">🔍</div>
                <h3 className="text-xl font-semibold text-white mb-2">未找到相关工具</h3>
                <p className="text-white/60">
                  尝试调整搜索关键词或选择其他分类
                </p>
              </div>
            </div>
          )}
        </div>
      </main>

      {/* 页脚 */}
      <footer className="mt-16 py-8 border-t border-white/10 bg-slate-900/50 backdrop-blur-md">
        <div className="container mx-auto px-6 text-center">
          <p className="text-white/60">
            © 2025 AI 导航网站. 探索无限可能的AI世界
          </p>
        </div>
      </footer>
    </div>
  );
}

export default App;